import { Modal, Button, Table } from 'antd';
import React from 'react';
import Title from '../../indemnitySheet/components/Title/Title';
import moment from 'moment';
const ClaimsRecord = props => {
  const { claimsVisible, setClaimsVisible, claimsData, passengerTitle } = props;
  const columns = [
    {
      title: '申领人',
      width: 120,
      dataIndex: 'applyUser',
      align: 'center',
    },
    {
      title: '申领单号',
      dataIndex: 'applyCode',
      align: 'center',
      width: 180,
    },
    {
      title: '申领状态',
      dataIndex: 'status',
      align: 'center',
      width: 120,
      render: (STATUS,item) => (
        <>
		      <p style={{marginBottom:"4px"}}>{STATUS == '0' ? '领取中' : STATUS == '1' ? '已领取' : '领取失败'}</p>
           {item.applyWay == '1' ? (<p style={{marginBottom:"4px"}}>({item.applyStatus == '0' ? '待审核' : item.applyStatus == '1' ? '已通过' : '未通过'})</p>) : null}
        </>
      ),
    },
    {
      title: '本补偿单申领金额',
      width: 150,
      dataIndex: 'currentAmount',
      align: 'center',
    },
    {
      title: '总申领金额',
      width: 120,
      dataIndex: 'transAmount',
      align: 'center',
    },
    {
      title: '领取方式',
      width: 120,
      dataIndex: 'applyWay',
      align: 'center',
      render: SWITCHOFF => (
        <>
		  <span>{SWITCHOFF == '0' ? '本人领取' : SWITCHOFF == '1' ? '代人领取' : '现金领取'}</span>
        </>
      ),
    },
    {
      title: '收款方式',
      width: 120,
      dataIndex: 'getMoneyWay',
      align: 'center',
      render: way => (
        <>
          <span style={{ display: way === '0' ? 'block' : 'none' }}>微信</span>
          <span style={{ display: way === '1' ? 'block' : 'none' }}>银联</span>
          <span style={{ display: way === '2' ? 'block' : 'none' }}>支付宝</span>
          <span style={{ display: way === '3' ? 'block' : 'none' }}>优惠券</span>
          <span style={{ display: way === '4' ? 'block' : 'none' }}>现金</span>
          <span style={{ display: way === '5' ? 'block' : 'none' }}>易宝</span>
        </>
      ),
    },
    {
      title: '申领时间',
      width: 180,
      dataIndex: 'payStartTime',
      align: 'center',
    },
    {
      title: '到账时间',
      width: 180,
      dataIndex: 'payReturnTime',
      align: 'center',
    },
    {
      title: '申领明细',
      width: 450,
      dataIndex: 'info',
      align: 'center',
      render: item => (
        <>
          {item &&
            item.map((val, index) => {
              return (
                <>
                <p key={index} style={{marginTop:"4px",marginBottom:"0px"}}>
                  {val.payType == '0' ? '不正常航班' : val.payType == '1' ? '异常行李' : '旅客超售'}
                  补偿 {val.currentAmount} （{val.paxName}）
                </p>
                {val.withBaby === "Y" ? <p>（ <span style={{color:"#e29c00",marginBottom:"0px"}}>含婴儿补偿</span> ）</p> : null}
                </>
              );
            })}
        </>
      ),
    },
  ];
  return (
    <Modal
      destroyOnClose={true}
      onCancel={() => {
        setClaimsVisible(false);
      }}
      footer={null}
      width={'90%'}
      title={[<Title key="title" title={`${passengerTitle} 旅客申领记录`} />]}
      visible={claimsVisible}
    >
      <Table
        columns={columns}
        dataSource={claimsData}
        bordered
        pagination={false}
        scroll={{ x: 900 }}
        rowKey="orderId"
      />
      <div style={{ textAlign: 'center', paddingTop: '20px' }}>
        <Button
          onClick={() => {
            setClaimsVisible(false);
          }}
          type="primary"
        >
          关闭
        </Button>
      </div>
    </Modal>
  );
};

export default ClaimsRecord;
